import React, { Component ,Fragment} from 'react';
import { Carousel } from 'antd-mobile';
import { connect } from 'react-redux'
import { Badge } from 'antd-mobile'
import { withRouter } from 'react-router-dom';


import { changeUiTitle,isSubpage } from '../../store/actions/ui'
import { addToCart } from '../../store/actions/cart'
import {getProductDetail } from "../../services";
import './detail.less'

const mapState=(state)=>{
    return{
        totalCount:state.cart.list.reduce((result,item)=>{
            result+=item.count;
            return result;
        },0)
    }
};

@withRouter//withRouter必须放在connect的外层，否则可能会影响一些东西
@connect(mapState,{ changeUiTitle,isSubpage,addToCart })
class Detail extends Component {
    constructor(){
        super();
        this.state={
            product:{},
            isLove:false
        }
    }
    componentDidMount() {
        const { id }=this.props.match.params;
        getProductDetail(id)
            .then(resp=>{
                this.setState({
                    product:resp.data.data
                });
                this.props.changeUiTitle(resp.data.data.name);
                this.props.isSubpage(true);
            })
            .catch(error=>{
                console.log(error)
            })
    }
    componentWillUnmount() {
        this.props.isSubpage(false);
    }
    onAddToCart=(item)=>{
        this.props.addToCart(item);
    };
    goToCart=()=>{
        this.props.history.push('/cart');
    };
    isLove=()=>{
        this.setState({
            isLove:!this.state.isLove
        })
    };
    render() {
        const {
            name,
            price,
            imgs=[]
        }=this.state.product;
        console.log(this.props)
        return (
            <Fragment>
            <div className="detail">
                <Carousel className="pro-detail-carousel"
                          autoplay
                          aotuplayInterval={500}
                          speed={1000}
                          infinite
                          dots={false}
                >
                {
                    imgs.map(item=>{
                        return(
                            <div key={item.img} >
                                <img src={item.img}
                                     alt={name}
                                     style={{ width: '100%', verticalAlign: 'top' }}/>
                            </div>
                        )
                    })
                }
                </Carousel>
                <div className="main-info">
                    <p className="price">￥{price}</p>
                    <p className="name">{name}</p>
                    <span>全场包邮 七天退换 24小时发货</span>
                </div>
                <div className="view-detail">
                    商品详细信息部分
                </div>
            </div>

            <div className="bottom">
                <div className="cart" onClick={this.goToCart.bind(this)}>
                    <Badge text={this.props.totalCount} overflowCount={99}>
                        <span>&#xe62b;</span>
                    </Badge>
                </div>
                <div className={ (this.state.isLove)===true? "love active":"love"} onClick={this.isLove}>&#xe687;</div>
                <div className="button addcart" onClick={this.onAddToCart.bind(this,this.state.product)}>加入购物车</div>
                <div className="button buyNow">立即购买</div>
            </div>
            </Fragment>
        );
    }
}

export default Detail;